<template>
  <div class="x-more-tag">
    <router-link class="link" :to="to">
      <span class="text">{{ text }}</span>
      <span class="icon"></span>
    </router-link>
  </div>
</template>

<script>
  export default {
    props: {
      text: {
        type: String,
        default: ''
      },
      to: {
        type: String,
        default: ''
      }
    }
  }
</script>

<style lang="scss" scoped>
  .x-more-tag {
    display: inline-block;
    height: 40px;
    border: 3px #231815 solid;
    padding: 0 60px 0 36px;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    .link {
      display: block;
      width: 100%;
      font-size: 24px;
      text-decoration: none;
    }
    .text {
      color: #231815;
      font-weight: 700;
    }
    .icon {
      display: block;
      width: 10px;
      height: 12px;
      background: url("../assets/more-pointer.png") 0 0 no-repeat;

      position: absolute;
      top: 12px;
      right: 22px;

      animation: anim-pointer 1s infinite;
    }
    @-webkit-keyframes anim-pointer {
      0% {
        transform: translate3d(-10px, 0, 0);
      }
      100% {
        transform: translate3d(5px, 0, 0);
      }
    }
  }
</style>
